<template>
    <div>
        <router-view></router-view>
        <van-tabbar v-model="active" inactive-color="#666">
            <van-tabbar-item @click="goHome">
                <span>
                    外卖
                </span>
                <template #icon="props">
                    <img :src="props.active?require('../../assets/tabar/ele-active.png') :require('../../assets/tabar/ele.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/search">
                 <span>
                    搜索
                </span>
                <template #icon="props">
                    <img :src="props.active?require('../../assets/tabar/search-active.png') :require('../../assets/tabar/search.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item icon="friends-o" to="/order">
                  <span>
                    订单
                </span>
                <template #icon="props">
                    <img :src="props.active?require('../../assets/tabar/order-active.png') :require('../../assets/tabar/order.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item icon="setting-o" to="/mine">
                  <span>
                    我的
                </span>
                <template #icon="props">
                    <img :src="props.active?require('../../assets/tabar/user-active.png') :require('../../assets/tabar/user.png')" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
export default {
    data() {
        return {
            active: 0,
        }
    },
    created(){
        let path = this.$route.path;
        console.log(path)
        switch(path){
            case '/home':
            this.active = 0;
            break;
            case '/search':
            this.active = 1;
            break;
             case '/order':
            this.active = 2;
            break;
             case '/mine':
            this.active = 3;
            break;
        }
    },
    watch:{
        "$route.path":function(path){
       switch(path){
            case '/home':
            this.active = 0;
            break;
            case '/search':
            this.active = 1;
            break;
             case '/order':
            this.active = 2;
            break;
             case '/mine':
            this.active = 3;
            break;
        }
        }
    }, 
    methods:{
        goHome(){
            let geohash = this.$store.state.geohash;
            this.$router.push({
                path:"/home",
                query:{
                    geohash:geohash
                }
            })
        }
    }
}
</script>